<template>
  <div class="work-container">
    <!-- 顶部卡片区域 -->
    <div class="card-row">
      <!-- 我的事项卡片 -->
      <div class="card my-tasks">
        <div class="card-header">
          <div class="card-title">
            <span>我的事项</span>
            <span class="more">更多 ></span>
          </div>
          <!-- 使用封装的选项卡组件 -->
          <TabsComponent
            :tabs="taskTabs"
            @tab-change="handleTaskTabChange"
            v-slot="{ activeTabIndex }"
          >
            <div class="card-content">
              <!-- 待办任务列表 -->
              <div v-if="activeTabIndex === 0">
                <!-- 待审核任务 -->
                <div class="task-item" v-for="(task, index) in todoTasks" :key="index">
                  <div class="task-icon" :class="task.iconType">
                    <i class="task-icon-inner"></i>
                  </div>
                  <div class="task-info">
                    <div class="task-title">
                      <span>{{ task.title }}</span>
                      <span
                        class="task-tag"
                        v-for="(tag, tagIndex) in task.tags"
                        :key="tagIndex"
                        >{{ tag }}</span
                      >
                    </div>
                    <div class="task-meta">
                      <span>创建人：{{ task.creator }}</span>
                      <span class="divider">|</span>
                      <span>创建时间：{{ task.createTime }}</span>
                      <template v-if="task.department">
                        <span class="divider">|</span>
                        <span>{{ task.department }}</span>
                      </template>
                      <template v-if="task.extra">
                        <span class="divider">|</span>
                        <span>{{ task.extra }}</span>
                      </template>
                    </div>
                  </div>
                  <div class="task-actions">
                    <button class="btn primary">同意</button>
                    <button class="btn">拒绝</button>
                  </div>
                </div>
              </div>

              <!-- 已读通知列表 -->
              <div v-else-if="activeTabIndex === 1">
                <div
                  class="task-item"
                  v-for="(notice, index) in readNotices"
                  :key="index"
                >
                  <div class="task-icon" :class="notice.iconType">
                    <i class="task-icon-inner"></i>
                  </div>
                  <div class="task-info">
                    <div class="task-title">
                      <span>{{ notice.title }}</span>
                      <span
                        class="task-tag"
                        v-for="(tag, tagIndex) in notice.tags"
                        :key="tagIndex"
                        >{{ tag }}</span
                      >
                    </div>
                    <div class="task-meta">
                      <span>发布人：{{ notice.publisher }}</span>
                      <span class="divider">|</span>
                      <span>发布时间：{{ notice.publishTime }}</span>
                    </div>
                  </div>
                  <div class="task-actions">
                    <button class="btn">查看详情</button>
                  </div>
                </div>
              </div>

              <!-- 已办列表 -->
              <div v-else-if="activeTabIndex === 2">
                <div class="task-item" v-for="(done, index) in doneTasks" :key="index">
                  <div class="task-icon" :class="done.iconType">
                    <i class="task-icon-inner"></i>
                  </div>
                  <div class="task-info">
                    <div class="task-title">
                      <span>{{ done.title }}</span>
                      <span class="task-tag">{{ done.status }}</span>
                    </div>
                    <div class="task-meta">
                      <span>申请人：{{ done.applicant }}</span>
                      <span class="divider">|</span>
                      <span>处理时间：{{ done.processTime }}</span>
                    </div>
                  </div>
                  <div class="task-actions">
                    <button class="btn">查看详情</button>
                  </div>
                </div>
              </div>
            </div>
          </TabsComponent>
        </div>
      </div>

      <!-- 公司公告卡片 -->
      <div class="card announcements">
        <div class="card-header">
          <div class="card-title">
            <span>公司公告</span>
            <span class="more">更多 ></span>
          </div>
          <!-- 使用封装的选项卡组件 -->
          <TabsComponent
            :tabs="announcementTabs"
            @tab-change="handleAnnouncementTabChange"
            v-slot="{ activeTabIndex }"
          >
            <div class="card-content">
              <!-- 全部公告 -->
              <div v-if="activeTabIndex === 0">
                <div
                  class="announcement-item"
                  v-for="(announcement, index) in announcements"
                  :key="index"
                >
                  <div class="announcement-img">
                    <img :src="announcement.imgUrl" alt="公告图片" />
                  </div>
                  <div class="announcement-info">
                    <div class="announcement-title">{{ announcement.title }}</div>
                    <div class="announcement-time">{{ announcement.time }}</div>
                  </div>
                </div>
              </div>

              <!-- 重要公告 -->
              <div v-else-if="activeTabIndex === 1">
                <div
                  class="announcement-item"
                  v-for="(announcement, index) in importantAnnouncements"
                  :key="index"
                >
                  <div class="announcement-img">
                    <img :src="announcement.imgUrl" alt="公告图片" />
                  </div>
                  <div class="announcement-info">
                    <div class="announcement-title">{{ announcement.title }}</div>
                    <div class="announcement-time">{{ announcement.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </TabsComponent>
        </div>
      </div>
    </div>

    <!-- 底部功能区域 -->
    <div class="function-section">
      <div class="section-title">
        <span>我的常用</span>
        <div class="action-buttons">
          <button class="btn-icon">+ 添加</button>
          <button class="btn-icon">切换</button>
        </div>
      </div>

      <div class="function-grid">
        <!-- 功能模块 -->
        <div class="function-item" @click="navigateTo('/organization')">
          <div class="function-icon">
            <img src="/组织管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">组织管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/staff')">
          <div class="function-icon green">
            <img src="/员工管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">员工管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/react')">
          <div class="function-icon blue">
            <img src="/考勤打卡.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">考勤管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/kao')">
          <div class="function-icon purple">
            <img src="/出差申请.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">出差申请</div>
        </div>

        <div class="function-item" @click="navigateTo('/ji')">
          <div class="function-icon cyan">
            <img src="/绩效管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">绩效管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/zhao')">
          <div class="function-icon orange-light">
            <img src="/招聘管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">招聘管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/xi')">
          <div class="function-icon green-light">
            <img src="/培训管理-1.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">培训管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/yuan')">
          <div class="function-icon red">
            <img src="/人事管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">人事管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/xin')">
          <div class="function-icon green-dark">
            <img src="/薪资管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">薪资管理</div>
        </div>

        <div class="function-item" @click="navigateTo('/zu')">
          <div class="function-icon orange-dark">
            <img src="/福利管理.png" alt="" style="width: 30px; height: 30px" />
          </div>
          <div class="function-name">福利管理</div>
        </div>

        <!-- <div class="function-item" @click="navigateTo('/work')">
          <div class="function-icon teal">
            <img
              src="../../assets/CY/会议管理.png"
              alt=""
              style="width: 30px; height: 30px"
            />
          </div>
          <div class="function-name">会议管理</div>
        </div> -->
      </div>
    </div>
    <!-- 图表区域 -->
    <div class="chart-section" style="margin-top: 20px">
      <div class="card">
        <div class="card-header">
          <div class="card-title">
            <span>人才概览</span>
            <span class="more">更多 ></span>
          </div>
        </div>
        <div class="talent-overview">
          <!-- 左侧数据统计 -->
          <div class="talent-stats">
            <div class="stat-card">
              <div class="stat-title">总人数</div>
              <div class="stat-value">1,312</div>
              <div class="stat-icon">
                <div class="icon-bg people-icon"></div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-title">招聘计划数</div>
              <div class="stat-value">120</div>
              <div class="stat-icon">
                <div class="icon-bg plan-icon"></div>
              </div>
            </div>
          </div>

          <!-- 右侧图表 -->
          <div class="talent-charts">
            <!-- 柱状图 -->
            <div class="chart-container">
              <div class="chart-title">人员招聘工作量</div>
              <div class="bar-chart-container">
                <canvas ref="barChartCanvas" width="400" height="200"></canvas>
              </div>
            </div>

            <!-- 饼图 -->
            <div class="chart-container">
              <div class="chart-title">岗位中心占比</div>
              <div class="pie-chart-container">
                <canvas ref="pieChartCanvas" width="200" height="200"></canvas>
              </div>
              <!-- 图例 -->
              <div class="chart-legend">
                <div class="legend-item">
                  <div class="legend-color" style="background-color: #4d7cfe"></div>
                  <div class="legend-text">产品研发</div>
                  <div class="legend-value">100</div>
                </div>
                <div class="legend-item">
                  <div class="legend-color" style="background-color: #7acbcf"></div>
                  <div class="legend-text">客服部</div>
                  <div class="legend-value">80</div>
                </div>
                <div class="legend-item">
                  <div class="legend-color" style="background-color: #a3d783"></div>
                  <div class="legend-text">销售部</div>
                  <div class="legend-value">60</div>
                </div>
                <div class="legend-item">
                  <div class="legend-color" style="background-color: #ffd272"></div>
                  <div class="legend-text">财务部</div>
                  <div class="legend-value">70</div>
                </div>
                <div class="legend-item">
                  <div class="legend-color" style="background-color: #ff9f7f"></div>
                  <div class="legend-text">人力资源部</div>
                  <div class="legend-value">20</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import TabsComponent from "../../components/TabsComponent.vue";
import { isMobile } from "../../utils/mobile-adapter";

// 获取路由实例
const router = useRouter();

// 检查当前环境
onBeforeMount(() => {
  console.log("Work页面加载中，设备类型:", isMobile() ? "移动端" : "桌面端");
});

// 任务选项卡数据
const taskTabs = [
  { name: "待办", count: 4 },
  { name: "已读通知", count: 3 },
  { name: "已办", count: 3 },
];

// 公告选项卡数据
const announcementTabs = [
  { name: "全部", count: 5 },
  { name: "重要", count: 2 },
];

// 处理任务选项卡切换
const handleTaskTabChange = (index: number) => {
  console.log("任务选项卡切换到:", index);
};

// 处理公告选项卡切换
const handleAnnouncementTabChange = (index: number) => {
  console.log("公告选项卡切换到:", index);
};

// 导航到指定路由
const navigateTo = (path: string) => {
  console.log("导航到:", path);
  router.push(path);
};

// 待办任务数据
const todoTasks = [
  {
    title: "休假申请",
    tags: ["请假", "年假", "长假", "大于3天"],
    creator: "张三",
    createTime: "2023-05-03 10:01",
    iconType: "green",
  },
  {
    title: "人事审核",
    tags: ["主管", "招聘"],
    creator: "王五",
    createTime: "2023-05-01 10:01",
    department: "产品部",
    extra: "大专本科",
    iconType: "orange",
  },
  {
    title: "报销审核",
    tags: ["主管", "招聘"],
    creator: "李四",
    createTime: "2023-05-01 10:01",
    department: "产品部",
    extra: "个人差旅",
    iconType: "red",
  },
  {
    title: "薪资审核",
    tags: ["薪酬"],
    creator: "王五",
    createTime: "2023年5月",
    department: "薪酬总额：3,253,235.22",
    extra: "人数：238",
    iconType: "purple",
  },
];

// 已读通知数据
const readNotices = [
  {
    title: "系统升级通知",
    tags: ["系统", "重要"],
    publisher: "系统管理员",
    publishTime: "2023-05-10 09:30",
    iconType: "blue",
  },
  {
    title: "员工培训通知",
    tags: ["培训"],
    publisher: "人力资源部",
    publishTime: "2023-05-08 14:20",
    iconType: "green",
  },
  {
    title: "安全检查通知",
    tags: ["安全"],
    publisher: "行政部",
    publishTime: "2023-05-05 16:45",
    iconType: "orange",
  },
];

// 已办任务数据
const doneTasks = [
  {
    title: "采购申请",
    status: "已批准",
    applicant: "李明",
    processTime: "2023-05-02 11:20",
    iconType: "green",
  },
  {
    title: "请假申请",
    status: "已拒绝",
    applicant: "王芳",
    processTime: "2023-05-01 09:15",
    iconType: "red",
  },
  {
    title: "出差申请",
    status: "已批准",
    applicant: "张伟",
    processTime: "2023-04-28 16:30",
    iconType: "green",
  },
];

// 公告数据
const announcements = [
  {
    title: "关于2024年度市场预测发布的公告",
    time: "2024-01-01 12:00:00",
    imgUrl: "/1.jpeg",
  },
  {
    title: "客户服务部最新服务产品",
    time: "2023-03-01 12:00:00",
    imgUrl: "/2.jpg",
  },
  {
    title: "2023 春节放假通知",
    time: "2023-01-10 12:00:00",
    imgUrl: "/3.jpg",
  },
  {
    title: "关于员工门禁系统升级的通知",
    time: "2023-01-01 12:00:00",
    imgUrl: "/1.jpeg",
  },
  {
    title: "关于加强办公室安全防护的通知",
    time: "2022-12-01 12:00:00",
    imgUrl: "/2.jpg",
  },
];

// 重要公告
const importantAnnouncements = [
  {
    title: "关于2024年度市场预测发布的公告",
    time: "2024-01-01 12:00:00",
    imgUrl: "/src/assets/1.jpeg",
  },
  {
    title: "关于员工门禁系统升级的通知",
    time: "2023-01-01 12:00:00",
    imgUrl: "/src/assets/1.jpeg",
  },
];

// 图表相关
const barChartCanvas = ref<HTMLCanvasElement | null>(null);
const pieChartCanvas = ref<HTMLCanvasElement | null>(null);

// 图表数据
const barChartData = [
  { month: "1月", value: 50 },
  { month: "2月", value: 180 },
  { month: "3月", value: 90 },
  { month: "4月", value: 240 },
  { month: "5月", value: 110 },
  { month: "6月", value: 180 },
];

const pieChartData = [
  { department: "产品研发", value: 100, color: "#4d7cfe" },
  { department: "客服部", value: 80, color: "#7acbcf" },
  { department: "销售部", value: 60, color: "#a3d783" },
  { department: "财务部", value: 70, color: "#ffd272" },
  { department: "人力资源部", value: 20, color: "#ff9f7f" },
];

// 绘制柱状图
const drawBarChart = () => {
  const canvas = barChartCanvas.value;
  if (!canvas) return;

  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 设置图表尺寸和边距
  const margin = { top: 20, right: 20, bottom: 40, left: 40 };
  const width = canvas.width - margin.left - margin.right;
  const height = canvas.height - margin.top - margin.bottom;

  // 找到最大值，用于缩放
  const maxValue = Math.max(...barChartData.map((d) => d.value));

  // 计算柱子宽度和间距
  const barWidth = (width / barChartData.length) * 0.6;
  const barSpacing = width / barChartData.length;

  // 绘制坐标轴
  ctx.beginPath();
  ctx.moveTo(margin.left, margin.top);
  ctx.lineTo(margin.left, height + margin.top);
  ctx.lineTo(width + margin.left, height + margin.top);
  ctx.strokeStyle = "#ccc";
  ctx.stroke();

  // 绘制水平网格线
  const gridLines = 5;
  ctx.beginPath();
  ctx.setLineDash([5, 5]);
  for (let i = 0; i < gridLines; i++) {
    const y = margin.top + height - (height / gridLines) * i;
    ctx.moveTo(margin.left, y);
    ctx.lineTo(width + margin.left, y);

    // 添加Y轴刻度文字
    ctx.fillStyle = "#999";
    ctx.textAlign = "right";
    ctx.fillText(((maxValue / gridLines) * i).toFixed(0), margin.left - 5, y + 4);
  }
  ctx.strokeStyle = "#eee";
  ctx.stroke();
  ctx.setLineDash([]);

  // 绘制柱状图
  barChartData.forEach((data, index) => {
    const x = margin.left + barSpacing * index + (barSpacing - barWidth) / 2;
    const barHeight = (data.value / maxValue) * height;
    const y = height + margin.top - barHeight;

    // 渐变填充
    const gradient = ctx.createLinearGradient(x, y, x, height + margin.top);
    gradient.addColorStop(0, "#4d7cfe");
    gradient.addColorStop(1, "#7dabff");

    ctx.fillStyle = gradient;
    ctx.fillRect(x, y, barWidth, barHeight);

    // 添加数值标签
    ctx.fillStyle = "#333";
    ctx.textAlign = "center";
    ctx.fillText(data.value.toString(), x + barWidth / 2, y - 5);

    // 添加X轴标签
    ctx.fillStyle = "#666";
    ctx.fillText(data.month, x + barWidth / 2, height + margin.top + 15);
  });
};

// 绘制饼图
const drawPieChart = () => {
  const canvas = pieChartCanvas.value;
  if (!canvas) return;

  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const radius = Math.min(centerX, centerY) - 10;

  // 计算总值
  const total = pieChartData.reduce((sum, item) => sum + item.value, 0);

  // 绘制饼图
  let startAngle = -Math.PI / 2; // 从顶部开始

  pieChartData.forEach((item) => {
    const sliceAngle = (2 * Math.PI * item.value) / total;

    // 绘制扇形
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
    ctx.closePath();

    ctx.fillStyle = item.color;
    ctx.fill();

    startAngle += sliceAngle;
  });

  // 绘制中心圆形（空心效果）
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
  ctx.fillStyle = "#fff";
  ctx.fill();
};

onMounted(() => {
  console.log("Work页面已挂载");

  // 检查图表元素是否存在
  if (barChartCanvas.value) {
    console.log("柱状图画布已找到");
  } else {
    console.warn("柱状图画布未找到");
  }

  if (pieChartCanvas.value) {
    console.log("饼图画布已找到");
  } else {
    console.warn("饼图画布未找到");
  }

  drawBarChart();
  drawPieChart();

  // 窗口大小变化时重绘图表
  window.addEventListener("resize", () => {
    console.log("窗口大小变化，重绘图表");
    if (barChartCanvas.value && pieChartCanvas.value) {
      barChartCanvas.value.width = barChartCanvas.value.parentElement?.clientWidth || 400;
      drawBarChart();

      pieChartCanvas.value.width = pieChartCanvas.value.parentElement?.clientWidth || 200;
      pieChartCanvas.value.height = pieChartCanvas.value.width;
      drawPieChart();
    }
  });
});
</script>

<style scoped>
.work-container {
  width: 100%;
  padding: 20px;
  background-color: #f5f7fa;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  /* 隐藏滚动条但保留滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* 为Webkit浏览器（Chrome、Safari等）隐藏滚动条 */
.work-container::-webkit-scrollbar {
  display: none;
}

/* 卡片行样式 */
.card-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  max-width: 100%;
  flex-wrap: wrap;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  flex: 1;
  min-width: 0; /* 防止flex子项溢出 */
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.more {
  color: #263961;
  font-size: 14px;
  cursor: pointer;
}

.card-tabs {
  display: flex;
  margin-top: 12px;
}

.tab {
  margin-right: 15px;
  padding: 4px 0;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #263961;
  font-weight: 500;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #263961;
}

.card-content {
  padding: 0 20px;
}

/* 任务项样式 */
.task-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  flex-wrap: wrap;
}

.task-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.green {
  background-color: #e6f7ff;
}

.orange {
  background-color: #fff7e6;
}

.red {
  background-color: #fff1f0;
}

.purple {
  background-color: #f9f0ff;
}

.blue {
  background-color: #bae7ff;
}

.task-icon-inner {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.task-tag {
  font-size: 12px;
  padding: 0 6px;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 2px;
  margin-left: 8px;
  margin-top: 4px;
}

.task-meta {
  font-size: 12px;
  color: #999;
  flex-wrap: wrap;
  display: flex;
}

.divider {
  margin: 0 8px;
}

.task-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  cursor: pointer;
}

.btn.primary {
  background-color: #263961;
  color: #fff;
  border-color: #263961;
}

/* 公告样式 */
.announcement-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}

.announcement-img {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  overflow: hidden;
  border-radius: 4px;
  flex-shrink: 0;
}

.announcement-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.announcement-info {
  flex: 1;
  min-width: 0;
}

.announcement-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-time {
  font-size: 12px;
  color: #999;
}

/* 功能区域样式 */
.function-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
  max-width: 100%;
  overflow: hidden;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-icon {
  padding: 4px 8px;
  font-size: 12px;
  color: #263961;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 100%;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.function-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background-color: skyblue;
}

.icon-placeholder {
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.7);
}

.function-name {
  font-size: 14px;
  color: #333;
  text-align: center;
  word-break: break-word;
}

.green-light {
  background-color: #d9f7be;
}

.green-dark {
  background-color: #95de64;
}

.blue {
  background-color: #bae7ff;
}

.blue-light {
  background-color: #d6e4ff;
}

.cyan {
  background-color: #b5f5ec;
}

.orange-light {
  background-color: #ffe7ba;
}

.orange-dark {
  background-color: #ffd591;
}

.teal {
  background-color: #87e8de;
}

/* 图表区域样式 */
.chart-section {
  margin-bottom: 20px;
  max-width: 100%;
  overflow-x: hidden;
}

.talent-overview {
  display: flex;
  padding: 20px;
  flex-wrap: wrap;
}

/* 左侧数据统计 */
.talent-stats {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-right: 20px;
}

.stat-card {
  background-color: #f9fafc;
  border-radius: 8px;
  padding: 15px;
  position: relative;
  height: 80px;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #333;
}

.stat-icon {
  position: absolute;
  right: 15px;
  top: 15px;
}

.icon-bg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(38, 57, 97, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.people-icon::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #263961;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E")
    no-repeat center center;
  mask-size: cover;
}

.plan-icon::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #263961;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E")
    no-repeat center center;
  mask-size: cover;
}

/* 右侧图表 */
.talent-charts {
  flex: 1;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  min-width: 0; /* 防止flex子项溢出 */
}

.chart-container {
  flex: 1;
  position: relative;
  min-width: 0; /* 防止flex子项溢出 */
}

.chart-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}

.bar-chart-container {
  height: 200px;
  position: relative;
}

.pie-chart-container {
  height: 200px;
  width: 200px;
  margin: 0 auto;
  position: relative;
  max-width: 100%;
}

/* 图例样式 */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 5px;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
}

.legend-text {
  font-size: 12px;
  color: #666;
  margin-right: 5px;
}

.legend-value {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

/* 媒体查询 - 响应式布局 */
@media (max-width: 1200px) {
  .card-row {
    flex-direction: column;
  }

  .function-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .talent-overview {
    flex-direction: column;
  }

  .talent-stats {
    width: 100%;
    flex-direction: row;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .stat-card {
    flex: 1;
  }

  .talent-charts {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .function-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .talent-stats {
    flex-direction: column;
  }

  .task-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-info {
    width: 100%;
    margin: 10px 0;
  }

  .task-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .card-content {
    padding: 0 15px;
  }

  .function-icon {
    width: 45px;
    height: 45px;
  }

  .function-name {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .work-container {
    padding: 10px;
  }

  .function-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .card-content {
    padding: 0 10px;
  }

  .card-title {
    font-size: 15px;
  }

  .more {
    font-size: 12px;
  }

  .task-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-tag {
    margin-left: 0;
    margin-right: 4px;
  }

  .task-meta {
    flex-direction: column;
  }

  .task-meta span {
    margin-bottom: 4px;
  }

  .divider {
    display: none;
  }

  .announcement-title {
    font-size: 13px;
  }

  .section-title {
    font-size: 15px;
  }

  .function-icon {
    width: 40px;
    height: 40px;
  }

  .talent-stats {
    gap: 10px;
  }

  .stat-card {
    height: auto;
    padding: 10px;
  }

  .stat-value {
    font-size: 22px;
  }

  .icon-bg {
    width: 30px;
    height: 30px;
  }

  .chart-legend {
    justify-content: flex-start;
  }
}

@media (max-width: 375px) {
  .function-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .function-icon {
    width: 35px;
    height: 35px;
  }

  .function-name {
    font-size: 11px;
  }

  .btn {
    padding: 3px 8px;
    font-size: 12px;
  }
}
</style>
